<template>
	<view class="jifen">
		<uni-nav-bar left-icon="back" left-text="积分商城" :statusBar="true" color="white" :fixed="true"
			backgroundColor="transparent" @clickLeft="leftClick" />
		<image :src="imgRemote+'/mpimg/jifen_shop.png'" class="bg"></image>
		<view class="my-score">
			<view class="count">
				<view style="font-size: 30rpx;text-align: center;">当前积分</view>
				<view style="font-size: 60rpx;margin-top:10rpx;text-align: center;">{{personInfo.score}}</view>
			</view>
			<view class="option">
				<view v-for="(item,index) in nav" :key="index" @click="nextPage(item.url)">
					<image :src="'/static/img/'+item.img+'.png'"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- {{total}} -->
		<view v-if="list.length==0" class="bitmap center">
			<image src="../../static/img/no_good.png" class="w-60" mode="widthFix"></image>
			<view class="gray_font fs-13">暂时没有可兑换的商品哦</view>
		</view>
		<view class="goods" v-else>

			<view class="h1 flex">
				<image src="../../static/img/j_start.png"></image>
				<text>好物兑换</text>
			</view>
			<view class="duihuan">
				<view v-for="(item,index) in list" :key="index" class="sing">
					<image :src="imgRemote+item.simages"></image>
					<view>{{item.name}}</view>
					<view class="fs-12">
						{{parseInt(item.integral)}} <text class="red-font">积分</text>
					</view>
					<view class="button">
						<text @click="redeemNow(item.id)" v-if="personInfo.score>=item.integral"
							class="huan">立即兑换</text>
						<text v-else class="no">积分不足</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="fill">
				<view class="h1">请先填写地址</view>
				<view class="info">
					<view>
						<view>收货人:</view>
						<input type="text" v-model="form.name" />
					</view>
					<view>
						<view>手机号码:</view>
						<input type="number" v-model="form.mobile" />
					</view>
					<view>
						<view>选择地区:</view>
						<!-- <text ></text> -->
						<input type="text" v-model="form.receiving" @click="visible=true" disabled />
					</view>
					<view>
						<view>详细地址：</view>

						<input type="text" v-model="form.address" />
					</view>
				</view>
				<view class="fs-11" style="color: #FF3333;margin: 20rpx 0 30rpx;">
					填写成功后地址无法修改 ，请认真填写！
				</view>
				<view class="submit" @click="confirm">确认兑换</view>
			</view>
		</uni-popup>
		<uni-popup ref="rule">
			<view class="rule">
				<view class="rule-info">
					<view>
						<text class="title">{{ruleInfo.name}}</text>
						<uni-icons type="closeempty" size="20" class="close" @click="$refs.rule.close()" color="white"></uni-icons>
					</view>
					<view class="content">
						<rich-text :nodes="ruleInfo.value"></rich-text>
					</view>
				</view>

			</view>
		</uni-popup>
		<uni-popup ref="success">
			<view style="width: 540rpx;">
				<image :src="imgRemote+'/assets/img/j_success.png'" style="width: 300rpx;" mode="widthFix"></image>
				<view class="white_b align_center"
					style="margin-top: -100rpx;  padding: 100rpx 0 20rpx; flex-direction: column;justify-content: center;">
					<view style="margin: 30rpx 0;">恭喜,兑换成功</view>
					<text
						style="border: 1px solid #FF3333;color:#FF3333;width: 200rpx;border-radius: 30rpx;padding: 10rpx 0;"
						class="fs-12" @click="$refs.success.close()">继续兑奖</text>
				</view>
			</view>
		</uni-popup>
		<w-picker :visible.sync="visible" mode="linkage" :value="defaultRegion1" :options="option" :level="3"
			default-type="id" :default-props="defaultProps1" @confirm="confirmAddrss($event,'linkage')" ref="linkage">
		</w-picker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				imgRemote: getApp().globalData.imgRemote,
				visible: false,
				receiving: '',
				defaultProps1: {
					label: "name",
					value: "id",
					children: "child"
				},
				defaultRegion1: [],
				option: [],
				nav: [{
						img: 'j_sign',
						name: '今日签到',
						url: '/pages/indexNav/sign'
					},
					{
						img: 'j_huan',
						name: '积分明细',
						url: 'detail'
					},
					{
						img: 'j_huan',
						name: '兑换记录',
						url: 'record'
					},
					{
						img: 'j_tuijian',
						name: '积分规则',
						url: 'rule'
					}
				],
				personInfo: {},
				list: [],
				page: 1,
				ruleInfo: {},
				form: {
					name: '',
					mobile: '',
					receiving: '',
					address: ''
				},
				id: '',
				total: 0
			}
		},
		methods: {
			//立即兑换
			redeemNow(id) {
				this.id = id;
				this.$refs.popup.open();
			},
			// 确认兑换
			confirm() {

				let params = {
					id: this.id,
					site: this.form
				}
				if (!/^1[3456789]\d{9}$/.test(this.form.mobile)) {
					return this.$Toast('请填写正确的手机号');
				}
				this.$post(this.$api.iOrder, params, (res) => {
					let {
						data
					} = res;
					console.log(data)
					if (data.code == 1) {
						this.memberInfo()
						this.$refs.popup.close();
						this.$refs.success.open();

					}
				})
			},
			nextPage(url) {
				if (url == 'rule') {
					this.$refs.rule.open()
				} else {
					uni.navigateTo({
						url
					})
				}
			},

			getAddress() {
				this.$get(this.$api.mainRegion, {}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						data.data.map((item) => {
							if (item.child.length == 0) {
								item.child = [{
									id: '',
									name: '',
									child: [{
										id: '',
										name: ''
									}]
								}]
							}
							item.child.map((second) => {
								if (second.child.length == 0) {
									second.child = [{
										id: '',
										name: ''
									}]
								}
							})
							return item;
						})
						this.option = data.data;
					}
				})
			},
			confirmAddrss(e) {
				this.form.receiving = e.result;
				// this.form.province = e.obj.col1.name;
				// this.form.city = e.obj.col2.name;
				// this.form.area = e.obj.col3.name;
			},
			getList() {
				let params = {
					page: this.page,
					limit: 10
				}
				this.$get(this.$api.iGoods, params, (res) => {
					let data = res.data;
					console.log(data.data)
					if (data.code == 1) {
						this.list = this.list.concat(data.data.data);

						this.total = data.data.total
					}
				});
			},
			memberInfo() {
				let params = {
					token: uni.getStorageSync('userToken')
				}
				this.$get(this.$api.userInfo, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.personInfo = data.data;
					}
				})
			},
			getRule() {
				this.$get(this.$api.iRule, {}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						let rule = data.data.filter((item) => {
							return item.id == 3
						});
						this.ruleInfo = rule[0]
					}
				})
			}
		},
		onShow() {
			this.getAddress();
			this.memberInfo();
		},
		onLoad() {

			this.getList();
			this.getRule();
		},
		onReachBottom() {
			this.page++;
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.jifen {
		/deep/ .uni-navbar--border {
			border: none;
		}

		.bg {
			position: absolute;
			top: 0;
			width: 100%;
			margin-top: -72rpx;
		}

		.my-score {
			position: relative;

			.count {
				color: white;
				margin: 30rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			.option {
				display: flex;
				justify-content: space-between;
				background: white;

				border-radius: 10rpx;
				margin: 30rpx;
				padding: 30rpx 40rpx;

				&>view {
					display: flex;
					align-items: center;
					flex-direction: column;
				}
			}
		}
	}

	.jifen {
		.goods .h1 {
			align-items: center;

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 20rpx;
			}
		}

		.goods {
			margin: 30rpx;
		}

		.duihuan {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			image {
				width: 280rpx;
				height: 280rpx;
				border-radius: 10rpx;
			}

			&>view {
				padding: 20rpx;
				text-align: center;
				margin-top: 30rpx;
				
				background: white;
				border-radius: 10rpx;
			}

			.sing>view {
				margin-top: 10rpx;

			}

			.button {
				text {

					border-radius: 22rpx;
					font-size: 26rpx;
					display: inline-block;
					width: 140rpx;

					padding: 4rpx 0;
				}

				.huan {
					border: 1px solid #FF3333;
					color: #FF3333;
				}

				.no {
					border: 1px solid #999;
					color: #999;
				}
			}
		}

		.fill {
			width: 500rpx;
			padding: 30rpx;
			background: white;
			border-radius: 10rpx;

			.h1 {
				font-weight: bold;
			}

			.info>view {
				border-bottom: 1px solid #efefef;
				text-align: left;
				padding: 20rpx 0;
			}

			input {
				margin-top: 14rpx;
			}

			.submit {
				width: 380rpx;
				height: 54rpx;
				line-height: 54rpx;
				color: white;
				border-radius: 27rpx;
				background: #FF3333;
				margin: 0 auto;
			}
		}

		.rule {
			padding: 15rpx;
			// padding-bottom: 4rpx;
			width: 680rpx;
			background: #F9B45F;
			border-radius: 10rpx;

			.rule-info {
				background: #FFEACF;
				border-radius: 10rpx;
			}

			.title {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 40rpx;
				color: #723D28;
				
			}

			.close {
				position: absolute;
				right: -6rpx;
				top:-6rpx;
				width:50rpx;
				height: 50rpx;
				
				line-height: 50rpx;
				background: #F9C085;
				border-radius: 50%;
				border: 6rpx solid #F9DDBE;
			}
			.content {
				text-align: left;
				padding:10rpx 20rpx;
				color: #B48565;
			}
		}
	}
</style>
